<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车列表</title>
<link rel="stylesheet" href="<%=basePath %>layui/css/layui.css">
<script src="<%=basePath %>layui/layui.js"></script>
<script src="<%=basePath %>/backPage/js/jquery.min.js"></script>
</head>
<body>
<br/>
<!-- 条件查询 -->
<form class="layui-form" action="" onsubmit="return false;">
  <div class="layui-form-item"  style="margin-left: 250px;">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <select name="f_uid" lay-search="" id="serch_f_uid"  autocomplete="off">
        <option value=""></option>
      </select>
    </div>
    <label class="layui-form-label">商品名称</label>
    <div class="layui-input-inline">
      <select name="f_pid" lay-search="" id="serch_f_pid"  autocomplete="off">
        <option value=""></option>
      </select>
    </div>
    <div class="layui-input-inline">
      <button class="layui-btn" lay-submit lay-filter="serchBtn"><i class="layui-icon">&#xe615;</i>搜索</button>
    </div>
  </div>
</form>
<hr>

<table id="demo" lay-filter="test"></table>

<!-- 添加的表单 -->
<form id="A_form" class="layui-form" action="" onsubmit="return false;" style="display:none">
<br>
	<input type="hidden" id="A_name" name="name" />
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <select name="f_uid" lay-search="" id="A_f_uid" lay-verify="required" autocomplete="off">
        <option value=""></option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品名称</label>
    <div class="layui-input-inline">
      <select name="f_pid" id="A_f_pid" lay-filter="A_f_pid_filiter" lay-verify="required" autocomplete="off">
        <option value=""></option>
      </select>
    </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">商品图片</label>
    <div class="layui-input-inline">
      <input type="text" id="A_img" readonly="readonly" name="img" lay-verify="required" autocomplete="off" class="layui-input A_multitermSet">
    </div>
    <div class="layui-input-inline" style="height: 35px;width:90px;">
      <img id="A_previewImg"/>
  	</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品价格</label>
    <div class="layui-input-inline">
      <input type="text" id="A_price" name="price" readonly="readonly" autocomplete="off" class="layui-input A_multitermSet">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品尺寸</label>
    <div class="layui-input-inline">
      <input type="text" id="A_size" name="size" readonly="readonly" autocomplete="off" class="layui-input A_multitermSet">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品数量</label>
    <div class="layui-input-inline">
      <input type="text" id="A_count" oninput="countBlur()" lay-verify="required|count" name="count" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品总额</label>
    <div class="layui-input-inline">
      <input type="text" id="A_totalSum" name="totalSum" readonly="readonly" autocomplete="off" class="layui-input A_multitermSet">
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="addBtn">添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<!-- 修改的表单 -->
<form id="U_form" lay-filter="U_form" class="layui-form" action="" onsubmit="return false;" style="display:none">
<br>
	<input type="hidden" name="id" />
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <select name="f_uid" lay-search="" id="U_f_uid" lay-verify="required" autocomplete="off">
        <option value=""></option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品名称</label>
    <div class="layui-input-inline">
      <select name="f_pid" id="U_f_pid" lay-filter="U_f_pid_filiter" lay-verify="required" autocomplete="off">
        <option value=""></option>
      </select>
    </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">商品图片</label>
    <div class="layui-input-inline">
      <input type="text" id="U_img" readonly="readonly" name="img" lay-verify="required" autocomplete="off" class="layui-input A_multitermSet">
    </div>
    <div class="layui-input-inline" style="height: 35px;width:90px;">
      <img src="" id="U_previewImg"/>
  	</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品价格</label>
    <div class="layui-input-inline">
      <input type="text" id="U_price" name="price" readonly="readonly" autocomplete="off" class="layui-input A_multitermSet">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品尺寸</label>
    <div class="layui-input-inline">
      <input type="text" id="U_size" name="size" readonly="readonly" autocomplete="off" class="layui-input A_multitermSet">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品数量</label>
    <div class="layui-input-inline">
      <input type="text" id="U_count" name="count" oninput="CountBlur()" lay-verify="required|count" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品总额</label>
    <div class="layui-input-inline">
      <input type="text" id="U_totalSum" name="totalSum" readonly="readonly"  autocomplete="off" class="layui-input A_multitermSet">
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="updateBtn">修改</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>


<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delAll"><i class="layui-icon">&#xe640;</i>批量刪除</button>
  </div>
</script>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>

<script type="text/html" id="imgTPL">
  <img src="<%=basePath%>{{d.img}}" onclick="hoverOpenImg()" style="width:30px;height:30px" />
</script>
<script>
function countBlur(){
	  var count = $("#A_count").val();
	  var price = $("#A_price").val();
	  $("#A_totalSum").val(count*price)
}
function CountBlur(){
	var count = $("#U_count").val();
    var price = $("#U_price").val();
    $("#U_totalSum").val(count*price)
}
function hoverOpenImg(){
    var img_show = null;
    $('td div img').hover(function(){
        var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:200px;' />";
        img_show = layer.tips(img, this,{
            tips:[2, 'rgba(255,255,255,1)']
            ,area: ['220px']
        });
    },function(){
        layer.close(img_show);
    });
}
</script>

<script type="text/html" id="productNameT">
  <div id="productNameStyle" style="{{d.productName == null ? "color:red;font-weight: 700;": ""}}">{{d.productName == null ? "该商品链接已失效": d.productName}}</div>
</script>

<script type="text/javascript">

layui.use(['table','layer','form','upload','laydate'], function(){
	  var table = layui.table;
	  var layer = layui.layer;
	  var form = layui.form;
	  var $ = layui.$;
	  var upload = layui.upload;
	  var laydate = layui.laydate;
	  var currNow = 1; //声明一个全局变量存储当前页码
	  
	  //第一个实例
	  table.render({
	    elem: '#demo'
	    ,height: 565
	    ,url: '<%=basePath %>back/queryAllCart' //数据接口
	    ,page: true //开启分页
	    ,id:"showAll"
	    ,limits:[10,50,100]
	    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
	    ,done: function(res, curr, count){
	    	
	        if(res.data==null){
	        	currNow = curr-1;  //如果当前页面没有数据了，就让页码-1
	        	//我们需要手动再重新刷新数据表格
	        	table.reload('showAll', {
		    			  where: { //设定异步数据接口的额外参数，任意设
		    			  }
		    			  ,page: {
		    			    curr: currNow //获取当前的页码
		    			  }
		    	}); //只重载数据
	        }else{
	        	currNow = curr;
	        }
	        
	      }
	    ,cols: [[ //表头
	    	{type: 'checkbox',}
	      ,{field: 'id', title: 'ID', width:80, sort: true}
	      ,{field: 'userName', title: '用户名', width:120,sort: true,}
	      ,{field: 'productName', title: '商品名称', width:130, sort: true,templet: '#productNameT'}//productNameT
	      ,{field: 'img', title: '商品图片', width: 178,sort: true,templet: '#imgTPL'}
	      ,{field: 'price', title: '商品价格', width: 150,sort: true,}
	      ,{field: 'size', title: '商品尺寸', width: 180, sort: true}
	      ,{field: 'count', title: '商品数量', width: 120, sort: true}
	      ,{field: 'totalSum', title: '商品总额', width: 150,}
	      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
	    ]]
	  });
	  
	  //自定义添加的验证规则，自带有phone，decimal
      form.verify({
          decimal:[/^[0-9]+([.]{1}[0-9]+){0,1}$/, '只能为小数或整数'],//验证价格
          number:[/^\d{0,8}$/,'只能为整数长度不过8位'],//验证数值
          age: [/^([1-9][0-9]{0,1}|100)$/, '年龄必须为100以内'],//验证年龄^[1-9][0-9]{2}$
          count:[/^\+?[1-9][0-9]{0,2}$/, '购买数量不能超过4位数']//购买商品数量的限制
      });
	  
	  //监听提交[搜索]
	  form.on('submit(serchBtn)', function(data){
	    //console.log(data.field);  //可以得到相关的参数值
	    //我们需要带着这些参数，重载一下表格就ok
	    table.reload('showAll', {
		  where: { //设定异步数据接口的额外参数，任意设
			  f_uid: data.field.f_uid
			  ,f_pid: data.field.f_pid
		    //…
		  }
		  ,page: {
		    curr: 1 //重新从第 1 页开始
		  }
		}); //只重载数据
	  });
	  
	//用户
	  $.post("<%=basePath%>back/queryAllUserWitchCartSelect",{
	  },function(res){
		  for(var i=0; i<res.length; i++){
			  $("#serch_f_uid").append("<option value='"+res[i].id+"'>"+res[i].name+"</option>");
			  $("#A_f_uid").append("<option value='"+res[i].id+"'>"+res[i].name+"</option>");
			  $("#U_f_uid").append("<option value='"+res[i].id+"'>"+res[i].name+"</option>");
			  form.render('select');  //让表单当中的select重新渲染
		  }
	  },'json');
	  //商品
	  $.post("<%=basePath%>back/queryAllProductWitchCartSelect",{
	  },function(res){
		  for(var i=0; i<res.length; i++){
			  $("#serch_f_pid").append("<option value='"+res[i].id+"'>"+res[i].name+"</option>");
			  $("#A_f_pid").append("<option value='"+res[i].id+"'>"+res[i].name+"</option>");
			  $("#U_f_pid").append("<option value='"+res[i].id+"'>"+res[i].name+"</option>");
			  form.render('select');  //让表单当中的select重新渲染
		  }
	  },'json');
	  
	  //当添加时商品名称改变时执行,A_f_pid_filiter
	  form.on('select(A_f_pid_filiter)', function(data){
          let id = data.elem.value; //当前字段变化的值
          if(id!=null && id != ""){
        	  //根据对应id搜索商品的信息并加入填框中
        	  $.get("<%=basePath %>back/queryProductByIdWitchCartInput/"+id,{},function(res){
        		  $("#A_name").val(res.name);
        		  $("#A_img").val(res.imgMain);
        		  $("#A_price").val(res.newPrice);
        		  $("#A_size").val(res.size);
        		  $("#A_img").val(res.imgMain);
        		  $("#A_previewImg").attr("style","width:200px;heigth:200px;");
        		  $("#A_previewImg").attr("src","../"+res.imgMain);
        		  $("#A_count").val(1);
        		  $("#A_totalSum").val($("#A_price").val()*1);
        	  });
        	  <%-- $.get("<%=basePath %>back/queryOrderInfoByIdWitchCartInput/"+id,{},function(res){
        		  $("#A_count").val(res.count);
        		  $("#A_totalSum").val(res.money);
        	  }); --%>
          }else{
        	  layer.msg("不能为空，请重新选择！");
          }
	  });
	  
	  
	  //当编辑时商品名称改变时执行,U_f_pid_filiter
	  form.on('select(U_f_pid_filiter)', function(data){
          let id = data.elem.value; //当前字段变化的值
          if(id!=null && id != ""){
        	  //根据对应id搜索商品的信息并加入填框中
        	  $.get("<%=basePath %>back/queryProductByIdWitchCartInput/"+id,{},function(res){
        		  $("#U_name").val(res.name);
        		  $("#U_img").val(res.imgMain);
        		  $("#U_price").val(res.newPrice);
        		  $("#U_size").val(res.size);
        		  $("#U_img").val(res.imgMain);
        		  $("#U_previewImg").attr("style","width:200px;heigth:200px;");
        		  $("#U_previewImg").attr("src","../"+res.imgMain);
        		  $("#U_count").val(1);
        		  $("#U_totalSum").val($("#U_price").val()*1);
        	  });
        	  <%-- $.get("<%=basePath %>back/queryOrderInfoByIdWitchCartInput/"+id,{},function(res){
        		  $("#U_count").val(res.count);
        		  $("#U_totalSum").val(res.money);
        	  }); --%>
          }else{
        	  layer.msg("不能为空，请重新选择！");
          }
	  });
	  
	  //设置商品基本信息不能修改提示A_multitermSet
	  $(".A_multitermSet").click(function () {
		  layer.msg("该数据在该页面不能修改！");
	  })
	//头工具栏事件
	  table.on('toolbar(test)', function(obj){
		console.log(obj);
	    var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
	      case 'add':
	        /* var data = checkStatus.data;
	        layer.alert(JSON.stringify(data)); */
	        layer.open({
	        	  type: 1,
	        	  title:"添加页面",
	        	  area: ['600px', '600px'],
	        	  content: $('#A_form') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
	        	});
	        
	      break;
	      case 'delAll':
	    	  var data = checkStatus.data;
	    	  if(data.length > 0){
	    		  layer.confirm('真的删除行这'+data.length+'行么', function(index){
	  	  	        var ids = "";
	  	  	        //通过循环将选中的id，用逗号拼接成一个字符串，例如：1，2，3，
	   	  	        for(var i =0; i<data.length; i++){
	  	  	        	ids += data[i].id+",";
	  	  	        }
	  	  	        $.post("<%=basePath%>back/delAllCartByIds",{
	  	  	        	ids:ids
	  	  	        },function(res){
	  	  	        	if(res){
	  	  	        		layer.msg("删除成功");
	  	  	        		layer.closeAll('page');
	  	  	        		table.reload('showAll', {
	  	  		    			  where: { //设定异步数据接口的额外参数，任意设
	  	  		    			  }
	  	  		    			  ,page: {
	  	  		    			    curr: currNow //获取当前的页码
	  	  		    			  }
	  	  		    			}); //只重载数据
	  	  	        	}else{
	  	  	        		layer.msg("删除失败");
	  	  	        		layer.closeAll('page');
	  	  	        	}
	  	  	        },'json');
	  	    	  })
	    	  }else{
	    		  layer.msg("你还未选中要删除的行！");
	    	  }
	      break;
	    };
	  });
	  
	  //监听行工具事件
	  table.on('tool(test)', function(obj){
	    var data = obj.data;  //当前行的所有数据
	    //console.log(obj)
	    if(obj.event === 'del'){
	      layer.confirm('真的删除行么', function(index){
	       /*  obj.del();
	        layer.close(index); */
	        //点击确定按钮的时候才会进来
	        var id = obj.data.id;
	        $.post("<%=basePath%>back/delCartById/"+id,{
	        },function(res){
	        	if(res){
	        		layer.msg("删除成功");
	        		layer.closeAll('page');
	        		table.reload('showAll', {
		    			  where: { //设定异步数据接口的额外参数，任意设
		    			  }
		    			  ,page: {
		    			    curr: currNow //获取当前的页码
		    			  }
		    			}); //只重载数据
	        	}else{
	        		layer.msg("删除失败");
	        		layer.closeAll('page');
	        	}
	        },'json');
	      });
	    } else if(obj.event === 'edit'){
	    	 layer.open({
	        	  type: 1,
	        	  title:"修改页面",
	        	  area: ['600px', '600px'],
	        	  content: $('#U_form') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
	        	});
	    	//要给修改的表单回显数据
	    	 form.val('U_form', data);
	    	 $("#U_previewImg").attr("src","../"+data.img);
		    //form.render('select');
	    }
	  });
	  
	  
	  
	  //监听提交[添加按钮]
	  form.on('submit(addBtn)', function(data){
	    //console.log(data);  //可以得到添加表单中文本框的值
	    //我们 需要发送一个请求，带上我们的参数。
	    $.post("<%=basePath%>back/addCart",{
	    	f_uid:data.field.f_uid,
	    	f_pid:data.field.f_pid,
	    	name:data.field.name,
	    	img:data.field.img,
	    	price:data.field.price,
	    	size:data.field.size,
	    	count:data.field.count,
	    	totalSum:data.field.totalSum,
	    },function(res){
	    	if(res){
	    		layer.close(layer.index);
	    		layer.msg("添加成功");
	    		layer.closeAll('page');
	    		table.reload('showAll', {
	    			  where: { //设定异步数据接口的额外参数，任意设
	    			  }
	    			  ,page: {
	    			    curr: 1 //重新从第 1 页开始
	    			  }
	    			}); //只重载数据
	    		//将表单中的数据进行清空【js的reset方法】
	    		$("#A_form")[0].reset();
	    	}else{
	    		layer.close(layer.index);
	    		layer.msg("添加失败");
	    		layer.closeAll('page');
	    		$("#A_form")[0].reset();
	    	}
	    },'json');
	    
	    
	  });
	  //监听提交[修改按钮]
	  form.on('submit(updateBtn)', function(data){
	    //console.log(data);  //可以得到添加表单中文本框的值
	    //我们 需要发送一个请求，带上我们的参数。
	    $.post("<%=basePath%>back/editCartById",{
	    	id:data.field.id,
	    	f_uid:data.field.f_uid,
	    	f_pid:data.field.f_pid,
	    	name:data.field.name,
	    	img:data.field.img,
	    	price:data.field.price,
	    	size:data.field.size,
	    	count:data.field.count,
	    	totalSum:data.field.totalSum,
	    },function(res){
	    	if(res){
	    		layer.close(layer.index);
	    		layer.msg("修改成功");
	    		layer.closeAll('page');
	    		table.reload('showAll', {
	    			  where: { //设定异步数据接口的额外参数，任意设
	    			  }
	    			  ,page: {
	    			    curr: currNow //重新从第 1 页开始
	    			  }
	    			}); //只重载数据
	    		//将表单中的数据进行清空【js的reset方法】
	    		$("#U_form")[0].reset();
	    	}else{
	    		layer.close(layer.index);
	    		layer.msg("修改失败");
	    		layer.closeAll('page');
	    		$("#U_form")[0].reset();
	    	}
	    },'json');
	  });
	  
	  
});


</script>
</body>
</html>